<%@ page contentType="text/html; charset=utf-8" %>
<style>
	.input-group {
		margin: 7px 7px;
		height: 34px;
	}

	select {
		height: 34px;
	}
</style>
<table>
	<tr>
		<th align=left>
			<div class="input-group" style="float:left;width:110px;">
				<span class="input-group-addon">日期</span>
				<input type="text" id="time" style="width:110px;height: 34px"/>
			</div>
			<div class="input-group" style="float:left;width: 130px">
				<span class="input-group-addon">地区</span>
				<select id="city" style="width: 130px;">
					<option value=''>All</option>
					<c:forEach var="item" items="${model.cities}" varStatus="status">
						<option value='${item.value.id}'>${item.value.name}</option>
					</c:forEach>
				</select>
			</div>
			<div class="input-group" style="float:left;width: 100px">
				<span class="input-group-addon">运营商</span>
				<select id="operator" style="width: 100px;">
					<option value=''>All</option>
					<c:forEach var="item" items="${model.operators}"
							   varStatus="status">
						<option value='${item.value.id}'>${item.value.name}</option>
					</c:forEach>
				</select>
			</div>
			<div class="input-group" style="float:left;width: 100px">
				<span class="input-group-addon">网络类型</span>
				<select id="network" style="width: 100px;">
					<option value=''>All</option>
					<c:forEach var="item" items="${model.networks}" varStatus="status">
						<option value='${item.value.id}'>${item.value.name}</option>
					</c:forEach>
				</select>
			</div>
			<div class="input-group" style="float:left;width: 100px">
				<span class="input-group-addon">来源</span>
				<select id="source" style="width: 100px;">
					<option value=''>All</option>
					<c:forEach var="item" items="${model.sources}"
							   varStatus="status">
						<option value='${item.value.id}'>${item.value.name}</option>
					</c:forEach>
				</select>
			</div>
		</th>
	</tr>
	<tr>
		<th align=left>
			<div class="input-group" style="float:left;width: 110px">
				<span class="input-group-addon">平台</span>
				<select id="platform" style="width: 110px;">
					<option value=''>All</option>
					<c:forEach var="item" items="${model.platforms}"
							   varStatus="status">
						<option value='${item.value.id}'>${item.value.name}</option>
					</c:forEach>
				</select>
			</div>
			<div class="input-group" style="float:left;width: 130px">
				<span class="input-group-addon">阶段</span>
				<select id="step" style="width: 130px;">
				</select>
			</div>
			<div class="input-group" style="float:left;width:308px;">
				<span class="input-group-addon">链接</span>
				<span class="input-icon" style="width:308px;">
							<input type="text" placeholder=""
								   class="search-input search-input form-control ui-autocomplete-input" id="page"
								   autocomplete="on" data=""/>
							<i class="ace-icon fa fa-search nav-search-icon"></i>
						</span>
			</div>
			<input class="btn btn-primary btn-sm" style="margin: 7px 7px;height: 34px"
				   value="查询" onclick="query()"
				   type="submit"/>
			<input class="btn btn-primary" id="checkbox" onclick="check()" type="checkbox"/>
			<label for="checkbox" style="display: -webkit-inline-box">选择对比</label>
		</th>
	</tr>
</table>
<table id="history" style="display: none">
	<tr>
		<th align=left>
			<div class="input-group" style="float:left;">
				<span class="input-group-addon">日期</span>
				<input type="text" id="time2" style="width:110px;"/>
			</div>
			<div class="input-group" style="float:left;">
				<span class="input-group-addon">页面</span>
				<span class="input-icon" style="width:250px;">
							<input type="text" placeholder=""
								   class="search-input search-input form-control ui-autocomplete-input" id="page2"
								   autocomplete="on" data=""/>
							<i class="ace-icon fa fa-search nav-search-icon"></i>
						</span>
			</div>
			<div class="input-group" style="float:left;">
				<span class="input-group-addon">阶段</span>
				<select id="step2" style="width: 240px;"></select>
				<span class="input-group-addon">网络类型</span> <select id="network2" style="width: 80px;">
				<option value=''>All</option>
				<c:forEach var="item" items="${model.networks}" varStatus="status">
					<option value='${item.value.id}'>${item.value.name}</option>
				</c:forEach>
			</select>
			</div>
		</th>
	</tr>
	<tr>
		<th align=left>
			<div class="input-group" style="float:left;">
				<span class="input-group-addon">平台</span> <select id="platform2" style="width: 100px;">
				<option value=''>All</option>
				<c:forEach var="item" items="${model.platforms}"
						   varStatus="status">
					<option value='${item.value.id}'>${item.value.name}</option>
				</c:forEach>
			</select>
				<span class="input-group-addon">地区</span> <select id="city2" style="width: 100px;">
				<option value=''>All</option>
				<c:forEach var="item" items="${model.cities}" varStatus="status">
					<option value='${item.value.id}'>${item.value.name}</option>
				</c:forEach>
			</select>
				<span class="input-group-addon">运营商</span> <select id="operator2" style="width: 100px;">
				<option value=''>All</option>
				<c:forEach var="item" items="${model.operators}"
						   varStatus="status">
					<option value='${item.value.id}'>${item.value.name}</option>
				</c:forEach>
			</select> <span class="input-group-addon">来源</span><select id="source2" style="width: 100px;">
				<option value=''>All</option>
				<c:forEach var="item" items="${model.sources}"
						   varStatus="status">
					<option value='${item.value.id}'>${item.value.name}</option>
				</c:forEach>
			</select></div>
		</th>
	</tr>
</table>

<div style="float: left; width: 100%;">
	<div id="${model.webSpeedDisplayInfo.lineChart.id}"></div>
</div>
<h5 class="center text-success"><strong>计算规则：所选天中288个5分钟点数据求和再平均的结果</strong></h5>
<table id="web_content" class="table table-striped table-condensed table-bordered table-hover">
	<thead>
	<tr>
		<th class="right text-success" width="10%">日期</th>
		<th class="right text-success" width="10%">访问次数</th>
		<th class="right text-success" width="10%">延时(ms)</th>
		<c:if test="${fn:length(model.webSpeedDisplayInfo.webSpeedSummarys) gt 1}">
			<th class="right text-success" width="10%">对比日期</th>
			<th class="right text-success" width="10%">对比访问次数</th>
			<th class="right text-success" width="10%">对比延时(ms)</th>
			<th class="right text-success" width="10%">变化比例</th>
		</c:if>
	</tr>
	</thead>
	<tbody>
	<c:set var="summarys" value="${model.webSpeedSummarys}"/>
	<c:forEach var="entry" items="${summarys['当前值']}">
		<tr class="right">
			<td class="right">${entry.value.dayTime}</td>
			<td>${w:format(entry.value.accessNumberSum,'#,###,###,###,##0')}</td>
			<td>${w:format(entry.value.responseTimeAvg,'#,###,###,###,##0')}</td>
			<c:if test="${fn:length(model.webSpeedDisplayInfo.webSpeedSummarys) gt 1}">
				<c:set var="response" value="${summarys['对比值'][entry.value.minuteOrder].responseTimeAvg}"/>
				<c:set var="ratio" value="${(entry.value.responseTimeAvg - response) / response * 100}"/>
				<td class="right">${summarys['对比值'][entry.value.minuteOrder].dayTime}</td>
				<td>${w:format(summarys['对比值'][entry.value.minuteOrder].accessNumberSum,'#,###,###,###,##0')}</td>
				<td>${w:format(summarys['对比值'][entry.value.minuteOrder].responseTimeAvg,'#,###,###,###,##0')}</td>
				<c:choose>
					<c:when test="${ratio < 0 }">
						<td class="text-success">${w:format(ratio,'#0.000')}%</td>
					</c:when>
					<c:otherwise>
						<td class="text-danger">${w:format(ratio,'#0.000')}%</td>
					</c:otherwise>
				</c:choose>
			</c:if>
		</tr>
	</c:forEach>
	</tbody>
</table>
<h5 class="center text-success"><strong>计算规则：这个测速点5分钟内所有数据求和再平均的结果</strong></h5>
<table id="web_content" class="table table-striped table-condensed table-bordered table-hover">
	<thead>
	<tr>
		<th class="right text-success" width="10%">时间</th>
		<th class="right text-success" width="10%">访问次数</th>
		<th class="right text-success" width="10%">延时(ms)</th>
		<c:if test="${fn:length(model.webSpeedDisplayInfo.webSpeedDetails) gt 1}">
			<th class="right text-success" width="10%">对比时间</th>
			<th class="right text-success" width="10%">对比访问次数</th>
			<th class="right text-success" width="10%">对比延时(ms)</th>
			<th class="right text-success" width="10%">变化比例</th>
		</c:if>
	</tr>
	</thead>
	<tbody id="details">
	<c:set var="details" value="${model.webSpeedDetails}"/>
	<c:forEach var="entry" items="${details['当前值']}">
		<tr class="right">
			<td class="right" width="10%">${entry.value.dateTime}</td>
			<td>${w:format(entry.value.accessNumberSum,'#,###,###,###,##0')}</td>
			<td>${w:format(entry.value.responseTimeAvg,'#,###,###,###,##0')}</td>
			<c:if test="${fn:length(model.webSpeedDisplayInfo.webSpeedDetails) gt 1}">
				<c:set var="response" value="${details['对比值'][entry.value.minuteOrder].responseTimeAvg}"/>
				<c:set var="ratio" value="${(entry.value.responseTimeAvg - response) / response * 100}"/>
				<td class="right">${details['对比值'][entry.value.minuteOrder].dateTime}</td>
				<td>${w:format(details['对比值'][entry.value.minuteOrder].accessNumberSum,'#,###,###,###,##0')}</td>
				<td>${w:format(details['对比值'][entry.value.minuteOrder].responseTimeAvg,'#,###,###,###,##0')}</td>
				<c:choose>
					<c:when test="${ratio < 0 }">
						<td class="text-success">${w:format(ratio,'#0.000')}%</td>
					</c:when>
					<c:otherwise>
						<td class="text-danger">${w:format(ratio,'#0.000')}%</td>
					</c:otherwise>
				</c:choose>
			</c:if>
		</tr>
	</c:forEach>
	</tbody>
</table>
